<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css"/>
    <th:block th:include="public::common-script"></th:block>
    <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
</head>

<body>

<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">行政管理</a></li>
        <li><a href="#">编辑学生</a></li>
    </ul>
</div>

<div class="formbody">

    <div class="formtitle"><span>基本信息</span></div>

    <ul class="forminfo">
        <li><label>学号</label><input name="id" disabled th:value="${student.id}" autocomplete="off" type="text"
                                    class="dfinput"/>
            <i id="idText">学号</i>
        </li>
        <li><label>姓名</label><input name="username" onkeyup="checkName(this.value)" th:value="${student.name}"
                                    autocomplete="off" type="text" class="dfinput"/>
            <i id="nameText">真实姓名</i>
        </li>
        <li><label>性别</label>
            <select name="gender" type="text" class="dfinput"/>
            <option th:selected="${student.getGender()=='男'}" value="男">男</option>
            <option th:selected="${student.getGender()=='女'}" value="女">女</option>
            </select>
            <i>男/女</i>
        </li>
        <li>
            <label>身份证号</label><input name="card" onkeyup="checkCard(this.value)" th:value="${student.card}"
                                      autocomplete="off" type="text" class="dfinput"/>
            <i id="cardText">身份证号</i>
        </li>

        <li><label>班级</label>
            <select name="clazz" type="text" class="dfinput"/>

            </select>
            <i>为学生分配班级</i>
        </li>
        <li><label>&nbsp;</label><input name="" type="button" onclick="update()" class="btn" value="确认修改"/></li>
    </ul>


</div>

<script type="text/javascript" th:inline="javascript">
    function checkName(name) {
        if (name == "") {
            $("#nameText").css("color", "#7f7f7f").html("真实姓名")
            return false;
        }
        if (!/^[\u4e00-\u9fa5]{2,4}$/.test(name)) {
            $("#nameText").css("color", "red").html("× 请输入该学生的真实姓名！")
            return false;
        } else {
            $("#nameText").css("color", "green").html("√")
            return true;
        }
    }

    function checkCard(card) {
        if (name == "") {
            $("#cardText").css("color", "#7f7f7f").html("身份证号")
            return false;
        }
        if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(card)) {
            $("#cardText").css("color", "red").html("× 请输入正确的身份号码！")
            return false;
        } else {
            $("#cardText").css("color", "green").html("√")
            return true;
        }
    }

    function update() {
        var name = $("[name=username]").val()
        var gender = $("[name=gender]").val()
        var card = $("[name=card]").val()
        var clazzId = $("[name=clazz]").val()
        console.log(name)
        if (!checkName(name)) {
            layer.msg('请正确填写表单数据', {icon: 5});
            return false;
        }
        if (card == "") {
            layer.msg('请输入身份证号码', {icon: 5});
            return;
        }
        if (!clazzId) {
            layer.msg('请选择班级，如还没有班级，请先创建！', {icon: 5});
            return;
        }
        $.get("/api/updateStudent", {
            id: [[${student.id}]],
            name: name,
            gender: gender,
            card: card,
            clazzId: clazzId,
        }, function (resp) {
            if (resp.code == 200) {
                layer.msg('更新成功', {icon: 1});
                setTimeout(function () {
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                    parent.location.reload();
                }, 3000)
            } else {
                layer.msg('更新失败:' + resp.message, {icon: 2});
            }
        })
    }

    $.get("/api/clazzList", function (resp) {
        console.log([[${student.clazz}]])
        var ht = "";
        for (var i = 0; i < resp.data.length; i++) {
            if ([[${student.clazz.id}]] == resp.data[i].id) {
                ht += "<option selected value='" + resp.data[i].id + "'>" + resp.data[i].created + "级" + resp.data[i].name + "</option>"
            } else {
                ht += "<option value='" + resp.data[i].id + "'>" + resp.data[i].created + "级" + resp.data[i].name + "</option>"
            }
        }
        $("[name=clazz]").html(ht);
    })
</script>
</body>

</html>
